<!-- 角色信息 -->
<!-- 角色信息 -->
<template>
  <div>
    <el-dialog v-model="dialogVisible" width="400" title="审核" draggable appendToBody destroyOnClose lockScroll :closeOnClickModal="false">
      <el-form ref="elFormRef" :model="formData" :rules="rules" scrollToError statusIcon>
        <el-form-item label="联系电话" labelWidth="6em" prop="phone">
          <el-input v-model="baseData.phone" disabled></el-input>
        </el-form-item>
        <el-form-item label="申请理由" labelWidth="6em" prop="applyReason">
          <el-input v-model="baseData.applyReason" type="textarea" disabled showWordLimit></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status" required labelWidth="6em">
          <el-radio-group v-model="formData.status">
            <el-radio label="同意" :value="1"></el-radio>
            <el-radio label="驳回" :value="2"></el-radio>
          </el-radio-group>
        </el-form-item>
        <div ref="parent">
          <el-form-item v-if="formData.status === 2" label="驳回理由" prop="remark" labelWidth="6em">
            <el-input
              v-model="formData.remark"
              placeholder="请输入驳回理由"
              :autosize="{ minRows: 4, maxRows: 6 }"
              type="textarea"
              :minlength="remarkMin"
              :maxlength="remarkMax"
              clearable
              showWordLimit
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item labelWidth="0em">
          <div style="width: 100%; padding-top: 20px">
            <el-button style="width: 100%" type="success" :loading="submitLoading" :disabled="submitLoading" :icon="IconPlus" @click="submit">保存</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import IconPlus from '~icons/ep/plus';
  import type { FormInstance, FormItemRule, FormRules } from 'element-plus';
  import { type ApplyCooperationUser, type AuditCooperationUserRequest, auditCooperationUserAxios } from '@/api/cooperation-management';
  import { useAutoAnimate } from '@formkit/auto-animate/vue';
  type $ShowData = {
    applyCooperationUser: ApplyCooperationUser;
    /** 审核后的回调 */
    auditCallBack?: () => void;
  };
  let auditCallBack: $ShowData['auditCallBack'] = undefined;
  const [parent] = useAutoAnimate();
  const submitLoading = ref(false);
  const dialogVisible = ref(false);
  const elFormRef: Ref<FormInstance | null> = ref(null);

  const baseData = shallowReactive({
    applyReason: '',
    phone: '',
  });
  const formData: AuditCooperationUserRequest = reactive<AuditCooperationUserRequest>({
    applyId: undefined,
    status: undefined,
    remark: '',
  });
  const remarkMin = 1;
  const remarkMax = 500;
  const rules = computed<FormRules>(() => {
    const _rules: FormRules = {
      status: [
        { required: true, type: 'number', message: '请选择状态', trigger: ['blur', 'change'] },
        { type: 'enum', enum: [1, 2], message: `状态不合法`, trigger: ['blur', 'change'] },
      ],
      remark: [{ min: remarkMin, max: remarkMax, type: 'string', message: `备注只能输入${remarkMin}-${remarkMax}个字符`, trigger: ['blur', 'change'] }],
    };
    if (formData.status === 2) {
      (_rules.remark as FormItemRule[]).push({ required: true, message: '请输入驳回理由', trigger: ['blur', 'change'] });
    }
    return _rules;
  });

  /**
   * 显示
   */
  function show(data: $ShowData) {
    baseData.applyReason = data.applyCooperationUser.applyReason ?? '';
    baseData.phone = data.applyCooperationUser.phone ?? '';
    formData.applyId = data.applyCooperationUser.applyId;
    formData.status = data.applyCooperationUser.status;
    formData.remark = '';

    auditCallBack = 'auditCallBack' in data && typeof data.auditCallBack === 'function' ? data.auditCallBack : undefined;
    dialogVisible.value = true;
  }

  /**
   * 隐藏
   */
  function hide() {
    dialogVisible.value = false;
  }

  /** 提交 */
  async function submit() {
    try {
      await elFormRef.value?.validate();
    } catch (error) {
      ElToast.error('提交失败，请完善表单，-BD002');
      return;
    }
    try {
      submitLoading.value = true;
      await auditCooperationUserAxios(formData);
      typeof auditCallBack === 'function' && auditCallBack();
      ElToast.success('操作成功');
      hide();
      submitLoading.value = false;
    } catch (error) {
      submitLoading.value = false;
      ElToast.error(error.msg || '提交失败，-BD003');
    }
  }

  defineExpose({ show, hide });
</script>
